<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Seleksi CPNS 2013</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="css/styles/form.css?v3.1.1187" />
<link href="css/calendarview.css?v3.1.1187" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.16/jquery-1.6.2.js"></script>

<!--jquery autocomplete-->
<link rel="stylesheet" href="js/jquery-ui-1.8.16/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<style>
fieldset {
	width: 570px;
	border:1px solid black; 
	padding:0 1.4em 1.4em 1.4em; 
	margin:0 0 1.5em 0;
}

legend {
	padding: 0.5em 0.5em;
	border: 1px solid black;
	color: black;
	font-size: 100%;
	text-align: right;
}

/*css validation*/
label.valid {
	width: 24px;
	height: 24px;
	/*background: url(assets/img/valid.png) center center no-repeat;*/
	display: inline-block;
	text-indent: -9999px;
}

label.error {
	font-weight: bold;
	color: red;
	padding: 2px 8px;
	margin-top: 2px;
}
</style>
<!--[if lt IE 7]>
		<script type="text/javascript" src="js/ie_png.js"></script>
		<script type="text/javascript">ie_png.fix('.png, .carousel-box .next img, .carousel-box .prev img');</script>
		<link href="css/ie6.css" rel="stylesheet" type="text/css" />
		<![endif]-->
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-44204367-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<style type="text/css">
<!--
.style1 {color: #000000}
.style5 {color: #990000}
-->
        </style>
</head>
<body id="page1">
<div class="tail-top">
  <div id="header">
    <div class="center"><a href="#"><img src="images/header-bg2.png" alt="" width="972" height="205" border="0" /></a></div>
    <div class="left"></div>
    <!--</div> -->
    <div class="right"> </div>
    <!--       <ul>
         <li><a href="contact-us.jsp"><img src="images/hubungi.png" alt="Hubungi Kami" width="43" height="45"  style="float:right;margin:0 5px 0 0;"/><div class="extra-wrap"><span>Hubungi Kami</span></div></a>
 
         <li><a href="index.jsp" class="active"><img src="images/home.png" alt="" width="43" height="45" style="float:right;margin:100 5px 0 0;"/> </a></li>
        </ul>-->
    <table width="100%" border="0">
      <center>
        <tr>
          <td width="87%"><marquee>Untuk tampilan terbaik diharapkan menggunakan browser <b>Mozilla Firefox 3 atau Safari</b> atau diatasnya.</marquee></td>
          <td width="7%"><img src="images/home.png" width="30" height="30"></td>
          <td width="6%"><img src="images/hubungi.png" width="30" height="30"></td>
        </tr>
        <tr>
          <td width="87%">&nbsp;</td>
          <td width="7%"><a href="ActionServlet?page=home">
            <div class="inside">Beranda</div>
            </a></td>
          <td width="6%"><a href="ActionServlet?page=contact-us">
            <div class="extra-wrap">Kontak</div>
            </a></td>
        </tr>
      </center>
    </table>
  </div>
  <div id="content">
    <div class="row-1">
      <div class="inside">
        <div class="container">
          <div class="aside">
            <h3>Menu Utama </h3>
            <ul>
              <li> <img src="images/general.png" alt="" width="43" height="41" border="0" />
                <div class="extra-wrap"> <span><strong>Informasi Umum</strong></span>Informasi Terkait Pendaftaran CPNS 2013</div>
                </li>
              <li> <img src="images/pengumuman.png" alt="" width="43" height="41" border="0" />
                <div class="extra-wrap"> <span><strong>Pengumuman</strong></span>Pengumuman Pendaftaran di Instansi Pemerintah<a href="#"></a> </div>
                </li>
              <li> <img src="images/peraturan.png" alt="" width="43" height="41" border="0" />
                <div class="extra-wrap"> <span><strong>Peraturan</strong></span>Kumpulan Peraturan Seleksi CPNS Nasional 2013<a href="#"></a> </div>
                </li>
              <li> <img src="images/jadwal.png" alt="" width="43" height="41" border="0" />
                <div class="extra-wrap"> <span><strong>Jadwal Pelaksanaan</strong></span>Jadwal Pelaksanaan Seleksi CPNS Nasional 2013<a href="#"></a> </div>
                </li>
              <li> <img src="images/alur.png" alt="" width="43" height="41" border="0" />
                <div class="extra-wrap"> <span><strong>Alur</strong></span>Prosedur Seleksi CPNS Nasional<a href="#"></a> </div>
              </li>
		<li> <img src="images/general.png" alt="" width="43" height="41" border="0" />
                <div class="extra-wrap"> <span><strong>Petunjuk Pendaftaran CPNS</strong></span>Petunjuk Pendaftaran CPNS Nasional<a href="#"></a> </div>
              </li>
              <li> <img src="images/daftar.png" alt="" width="43" height="41" border="0" />
                <div class="extra-wrap"> <span><strong>Pendaftaran CPNS</strong></span>Pendaftaran CPNS Nasional<a href="#"></a> </div>
              </li>
              <li> <img src="images/hasil.png" alt="" width="43" height="41" border="0" />
                <div class="extra-wrap"> <span><strong>Hasil Pengolahan TH K-2</strong></span>Hasil Pengolahan Seleksi Tenaga Honorer Kategori 2<a href="#"></a> </div>
              </li>
            </ul>
            <div class="wrapper"></div>
          </div>
          <div class="content">
            
	
		<h4 class="style1">Hasil Pengolahan Seleksi Tenaga Honorer Kategori-2 (TH K-2)</h4>


		<p>Informasi Hasil Pengolahan Seleksi Tenaga Honorer Kategori-2 dapat juga dilihat pada link dibawah ini: </p>

		<p> Link ke Kementerian PAN dan RB di : <a href="http://www.menpan.go.id/">www.menpan.go.id</a> </p>

		
		<form  name="searchForm" id="formPencarian">
				<input type="hidden" name="formID" value="32063786011852"/>
				<table id="infoTable">
        			<tr>
        				<td>Instansi</td>
        				<td><select title="JenisInstansi" id="jenisInstansi" name="jenisInstansi" style="font: tahoma;size:10">
        												<option value="">PILIH JENIS</option>
														<option value="P">PUSAT</option>
														<option value="D">DAERAH</option>
													</select></td>
        				<td>Propinsi</td>
        				<td><select title="Provinsi" id="provinsi" name="provinsi">
														<option value="">PILIH PROPINSI</option>
													</select></td>
        			</tr>
        			<tr>
        				<td>Instansi Kerja</td>
        				<td><select title="instansiKerja" id="instansiKerja" name="instansiKerja">
														<option value="">PILIH INSTANSI KERJA</option>														
													</select></td>
        				<td>&nbsp;</td>
        				<td><button type="button" id="btnCari">&nbspPilih&nbsp</button></td>
        			</tr>
        			<tr>
        				<td>No Test</td>
        				<td><input type="text" name="noTest" id="noTest"/></td>
        				<td>&nbsp;</td>
        				<td><button type="button" id="btnCariNoTest">&nbspCari&nbsp</button></td>
        			</tr>	
        	</table>
        </form>
		
		<div id="info" style="display: none">
			<select id="order" >
				<option value="no" selected="selected">Sort By Nomor Urut</option>
				<option value="nama">Sort By Nama</option>														
				<option value="noTest">Sort By No Test</option>
			</select>	
			
			<div id="infoInstansi" style="display: none"></div>
			
			<table id="myTable"  class="table">
				<tr>
					<td width="20%">No</td><td width="40%">No Test</td><td>Nama</td>
				</tr>
			</table>
	<!-- 		<div class="pagination">
			  <ul>
			    <li class="prev disabled"><a href="#">&larr; Previous</a></li>
			    <li class="active"><a href="#">1</a></li>
			    <li><a href="#">2</a></li>
			    <li><a href="#">3</a></li>
			    <li><a href="#">4</a></li>
			    <li><a href="#">5</a></li>
			    <li class="next"><a href="#">Next &rarr;</a></li>
			  </ul>
			</div>  -->
			<div id="paging" class="pagination"></div>
			Lompat Ke Halaman <input type="text" name="gotoPage" id="gotoPage" class="span1"/>&nbsp;
        	<button type="button" id="btnGoto">&nbspPilih&nbsp</button>	
		</div>
		
		
  		
			<!--untuk footer -->
			
            <div class="wrapper"></div>
          </div>
          <div class="clear"></div>
        </div>
  </div>
  </div>
  </div>
  

  </div>


  <div id="footer">
    <div class="footerlink">
      <p class="lf">Hak Cipta  &copy;  2013 Badan Kepegawaian Negara. Semua Hak Dilindungi.</p>
      <p class="rf">Website : <a href="http://www.bkn.go.id/">www.bkn.go.id</a> </p>
      <div style="clear:both;"></div>
    </div>
  </div>
</div>

</body>
</html>

<script>
	$(function() {
		var maxPage = 0;
		$('#order').change(function(){
			handleGoToPage(null, 1);						
		});

		$('#btnGoto').click(function(){
			var par = $('#gotoPage').val();
			if (par > 0 && par <= maxPage){
				handleGoToPage(null, par);
			} else {
				alert('Nilai halaman tidak valid');
			}
						
		});

		$('#btnCariNoTest').click(function(){
			var instansi = $('#instansiKerja').val();
			if (instansi == ""){
				alert("Silahkan pilih instansi kerja");
				return;
			}
			var noTest = $('#noTest').val();
			var url = '/sscnServer/cari_x_hasil_thk2.do?instansi=' + instansi + '&cari=' + noTest;
			if (noTest != ""){
				$.ajax({
					url : url,
					dataType : "jsonp",
					data : {
						featureClass : "P"
					},
					success : function(data) {
						$('#info').show();
						$('#paging').hide();
						$("#myTable").find("tr:gt(0)").remove();
						if (data.result == "1"){
							$('#infoInstansi').html('<b>Instansi : ' + data.hasil[0].instansiThk2.nama + '</b>');
							$('#infoInstansi').show();
							var html = '';
							//$.map(data.hasil, function(item) {
								html += '<TR>'
								      + '<TD>' + data.hasil[0].no + '</TD>'
								      + '<TD>' + data.hasil[0].noTest + '</TD>'
								      + '<TD>' + data.hasil[0].nama + '</TD>'
										+ '</TR>';
							//});
							$('#myTable tr:last').after(html);
						} else {
							var html = '';
								html += '<TR>'
								      + '<TD colspan="3" align="center">Data tidak ditemukan</TD>'
								      + '</TR>';
							
							$('#myTable tr:last').after(html);
						}
					}
				});			
			}				
		});
		
		$('#btnCari').click(function(){
			var param = $('#instansiKerja').val();
			
			var url = '/sscnServer/hasil_thk2.do?instansi='
				+ param + '&order=no';
			if (param != ""){
				$.ajax({
					url : url,
					dataType : "jsonp",
					data : {
						featureClass : "P"
					},
					success : function(data) {
						$('#info').show();
						$("#myTable").find("tr:gt(0)").remove();
						if (data.result == "1"){
							var html = '';
							$.map(data.hasil, function(item) {
								html += '<TR>'
								      + '<TD>' + item.no + '</TD>'
								      + '<TD>' + item.noTest + '</TD>'
								      + '<TD>' + item.nama + '</TD>'
										+ '</TR>';
							});
							$('#myTable tr:last').after(html);

							// paging
							var paging1 = '';
							if (data.count == 0){
								paging1 = 'Showing ' + data.index + ' to ' + data.part2 + 'of ' + data.count + ' entries';
							} else {
								paging1 = 'Showing ' + (data.index + 1) + ' to ' + data.part2 + 'of ' + data.count + ' entries';
							}
							
							//$('#paging').append(paging1);
							var paging2 = '<ul>';
							var prev = '';
							if (data.activePage == 1){
								prev = '<li class="prev disabled">'
											+'<a href="#"> Prev</a>'
										+'</li>';
							} else {
								prev = '<li class="prev">'
											+'<a href="#" id="linkPagePrev" onClick="handleGoToPage(event, '+(data.activePage-1)+')"> Prev</a>'
										+'</li>';
							}
							maxPage = data.numpage;
							var activePage = data.activePage;
							var x = (activePage/10) * 10;
							
							if (data.numpage < (x + 10)){
								x = data.numpage - 10; 
							} else if (data.numpage == (x+10)){
								x = x-1;
							} else if (x % 10 == 0) {
								if (x>=10){
									x = x - 1;
								}
							}
							
							var j = 0;
							if (x < 0){
								x = 0;
								j = data.numpage;
							} else {
								j = 10;	
							}
							var nav = '';
							for (var i=1;i<=j;i++){								
								if ((x+i) == activePage){ 
									nav = nav + '<li class="active">';		
						 		} else { 
									nav = nav + '<li>';
						 		}  
								nav = nav + '<a href="#" onClick="handleGoToPage(event,' + (x+i) + ')">' + (x+i) + '</a></li>';	
								          
						 	}

						 	var next = '';
						 	if (activePage >= data.numpage){
								next = "<li class='next disabled'><a href='#'>Next </a></li>";	
							} else {
								next = "<li class='next'><a href='#' onClick='handleGoToPage(event, " + (activePage+1) + ")'>Next</a></li>";
							}

						 	paging2 = paging2 + prev + nav + next + '</ul>';
						 	$('#paging').html(paging2);		
						 	$('#paging').show();														
						}											
					}
				});					
			}			
		});

		handleGoToPage = function(e, page){
			var param = $('#instansiKerja').val();
			var order = $('#order').val();
			var url = '/sscnServer/hasil_thk2.do?instansi='
				+ param + '&activePage='+page + '&order=' + order;
			if (param != ""){
				$.ajax({
					url : url,
					dataType : "jsonp",
					data : {
						featureClass : "P"
					},
					success : function(data) {
						$('#info').show();
						$("#myTable").find("tr:gt(0)").remove();
						if (data.result == "1"){
							var html = '';
							$.map(data.hasil, function(item) {
								html += '<TR>'
								      + '<TD>' + item.no + '</TD>'
								      + '<TD>' + item.noTest + '</TD>'
								      + '<TD>' + item.nama + '</TD>'
										+ '</TR>';
							});
							$('#myTable tr:last').after(html);
								
							// paging
							maxPage = data.numpage;
							var paging1 = '';
							if (data.count == 0){
								paging1 = 'Showing ' + data.index + ' to ' + data.part2 + 'of ' + data.count + ' entries';
							} else {
								paging1 = 'Showing ' + (data.index + 1) + ' to ' + data.part2 + 'of ' + data.count + ' entries';
							}
							
							//$('#paging').append(paging1);
							var paging2 = '<ul>';
							var prev = '';
							if (data.activePage == 1){
								prev = '<li class="prev disabled">'
											+'<a href="#"> Prev</a>'
										+'</li>';
							} else {
								prev = '<li class="prev">'
											+'<a href="#" id="linkPagePrev" onClick="handleGoToPage(event, '+(data.activePage-1)+')"> Prev</a>'
										+'</li>';
							}

							var activePage = data.activePage;
							var x = (activePage/10) * 10;
							
							if (data.numpage < (x + 10)){
								x = data.numpage - 10; 
							} else if (data.numpage == (x+10)){
								x = x-1;
							} else if (x % 10 == 0) {
								if (x>=10){
									x = x - 1;
								}
							}
							
							var j = 0;
							if (x < 0){
								x = 0;
								j = data.numpage;
							} else {
								j = 10;	
							}
							var nav = '';
							for (var i=1;i<=j;i++){								
								if ((x+i) == activePage){ 
									nav = nav + '<li class="active">';		
						 		} else { 
									nav = nav + '<li>';
						 		}  
								//nav = nav + '<a href="#" onClick="handleGoToPage(event,' + (x+i) + '>")>' + (x+i) + '</a></li>';
								nav = nav + '<a href="#" onClick="handleGoToPage(event,' + (x+i) + ')">' + (x+i) + '</a></li>';	
						 	}

						 	var next = '';
						 	if (activePage >= data.numpage){
								next = "<li class='next disabled'><a href='#'>Next </a></li>";	
							} else {
								next = "<li class='next'><a href='#' onClick='handleGoToPage(event, " + (activePage+1) + ")'>Next</a></li>";
								
							}

						 	paging2 = paging2 + prev + nav + next + '</ul>';
						 	$('#paging').html(paging2);		
						 	$('#paging').show();														
						}											
					}
				});					
			}			
			
		}
		
		$('#jenisInstansi').change(function() {			
			//clear jabatan
			var html = '<option value="">PILIH PROPINSI</option>';
			$('#provinsi').html(html);
			var param = $('#jenisInstansi').val();
			
			var url = '/sscnServer/cb_provinsi.do?jenis='
				+ param;
			if (param != ""){
				$.ajax({
					url : url,
					dataType : "jsonp",
					data : {
						featureClass : "P"
					},
					success : function(data) {
						var html = '<option value="">PILIH PROPINSI</option>';
						$.map(data.provinsiList, function(item) {
							html += '<option value="' + item.kode + '">' + item.nama
									+ '</option>';
						})
						html += '</option>';
						$('#provinsi').html(html);			
						//clear pendidikan
						html = '<option value="">PILIH INSTANSI KERJA</option>';			
						$('#instansiKerja').html(html);					
					}
				});					
			}
		});

		$('#provinsi').change(function() {			
			//clear jabatan
			var html = '<option value="">Pilih Instansi Kerja</option>';
			$('#instansiKerja').html(html);
			var param  = $('#provinsi').val();
			var url = '/sscnServer/cb_instansi_kerja.do?provinsi='
				+ param;
			if (param != ""){
				$.ajax({
					url : url,
					dataType : "jsonp",
					data : {
						featureClass : "P"
					},
					success : function(data) {
						var html = '<option value="">PILIH INSTANSI KERJA</option>';
						$.map(data.instansiKerjaList, function(item) {
							html += '<option value="' + item.kode + '">' + item.nama
									+ '</option>';
						})
						html += '</option>';
						$('#instansiKerja').html(html);
					}
				});
			}			
			
		});
	});
	
  </script>